// The different charge amount.
const chargeAmount = [10, 20, 30, 50, 100, 200, 300, 500, 1000];

// Get all amount grid.
let allGridItem = document.getElementsByClassName('grid-item');

// Set amount and onclick function of grid.
for (let i = 0;i < allGridItem.length; i++) {
  allGridItem[i].innerHTML = chargeAmount[i] + '元';
  allGridItem[i].onclick = function () {
    let amount = chargeAmount[i];
    selectAmount(amount);
  }
}


// Invoke ArkTS call and use the data.
function chooseContact() {
  const phoneNumber = '13212345678';
  // todo H5向原生发送数据【调用方法为callHandler同时需要指定原生处理的方法名称】
  WebViewJavascriptBridge.callHandler('backinJS',JSON.stringify({
    data:'JS发送的数据',
    handlerName:'backinJS'
  }),(data)=>{
    console.log("【js】 -- chooseContact【获取回调】 ------------------------------");
    console.log(data);
  })
}

// Click the amount grid.
function selectAmount(amount) {
  for (let i = 0;i < allGridItem.length; i++) {
    allGridItem[i].classList.remove('selected');
  }
  event.target.classList.add('selected');
  window.ohosCallNative.callNative('changeAmount', { amount: amount });
}

// Contact input onclick.
function changeVal() {
  let input = event.target.value;
  let name = document.getElementById('phone_tip').innerHTML;
  const tel = document.getElementById('phone').value;
  window.ohosCallNative.callNative('changeTel', { tel: tel });
  if (name !== '手机号' && input.length < 13) {
    document.getElementById('phone_tip').innerHTML = '手机号';
  }
  let result = input;
  let phoneNumber = input.replace(/\D/g, '').slice(0, 11);
  result = phoneNumber.replace(/(\d{3})(\d{4})(\d{1,4})/, '$1 $2 $3');
  event.target.value = result;
}